@import compass/css3

$items: 6
$width: 860px
$aspectRatio: 16 / 10
$gridGutter: 10px

$thumbnailWidth: ($width - ($items - 1) * $gridGutter) / $items
$thumbnailHeight: $thumbnailWidth / $aspectRatio

$photoWidth: $width
$photoHeight: $photoWidth / $aspectRatio

// RESET
body, ul, li
    margin: 0
    padding: 0

img
    border: 0

// CLASSES
.inline
    overflow: hidden
    list-style: none

    li
        float: left

// GALLERY
.gallery
    @extend .inline
    position: relative
    width: $width
    height: $thumbnailHeight + $gridGutter + $photoHeight
    margin: $gridGutter auto 0

.gallery-item
    margin-bottom: $gridGutter

    &:not(:first-child)
        margin-left: $gridGutter

    &:target
        .gallery-thumbnail
            opacity: 1
            cursor: auto

        .gallery-photo
            z-index: 1
            opacity: 1

.gallery-thumbnail
    opacity: .5

    &:hover
        opacity: .7

.gallery-photo
    @include transition(all 300ms ease-in-out)
    position: absolute
    top: $thumbnailHeight + $gridGutter
    left: 0
    opacity: 0